<template>
    <Form ref="form" :model="form" :rules="ruleValidate" label-position="left" :label-width="150">

        <FormItem label="学科名称" prop="subject_name.zh">
            <Input v-model="form.subject_name.zh" placeholder="输入学科名称"></Input>
        </FormItem>

        <FormItem label="选择学段" prop="period_id">
            <Select v-model="form.period_id" multiple @on-change="periodChange" placeholder="请选择学科">
                <Option v-for="item in period" :value="item.id" :key="item.id">{{ item.period_name.zh?item.period_name.zh:item.period_name.mn }}</Option>
            </Select>
        </FormItem>

        <FormItem label="选择年级" prop="grade_id">
            <Select v-model="form.grade_id" multiple placeholder="请选择年级">
                <Option v-for="item in grade" :value="item.id" :key="item.id">{{ item.grade_name.zh? item.grade_name.zh: item.grade_name.mn }}</Option>
            </Select>
        </FormItem>

        <FormItem label="学科类型" prop="type">
            <Select v-model="form.type" @on-change="subjectChange" placeholder="请选择学科类型">
                <Option value="single">单科</Option>
                <Option value="complex">综合</Option>
            </Select>
        </FormItem>

        <FormItem v-if="subState" label="子级学科" prop="children">
            <Select v-model="form.children" multiple placeholder="请选择子级学科">
                <Option v-for="(item,index) in subjectList" :value="item.id" :key="index">{{ item.subject_name.zh?item.subject_name.zh:item.subject_name.mn }}</Option>
            </Select>
        </FormItem>

        <FormItem label="学科序号" prop="subject_number">
            <Input v-model="form.subject_number" placeholder="输入学科序号"></Input>
        </FormItem>

        <FormItem label="学科排序" prop="subject_order">
            <Input v-model="form.subject_order" number placeholder="输入学科排序"></Input>
        </FormItem>

        <FormItem label="学科别名" prop="subject_slug">
            <Input v-model="form.subject_slug" placeholder="输入学科别名"></Input>
        </FormItem>

        <FormItem label="图标类名">
            <Input v-model="form.icon" placeholder="输入图标类名"></Input>
        </FormItem>

        <FormItem>
            <Button type="primary" @click="handleSubmit('form')" :loading="butload">{{ condition?'修改':'添加' }}</Button>
        </FormItem>

    </Form>
</template>

<script>
export default {
    props: {
        condition: {
            type: [Boolean, Number],
            default: false
        }
    },
    layout:'menu',
    data () {
        return {
            subState: false,
            butload: false,
            form:{
                subject_name:{
                    zh:null,
                    en:null,
                    mn:null,
                },
                type: 'single',
                period_id: [],
                subject_slug:null,
                subject_number:null,
                subject_order:null,
                grade_id: [],
                children: [],
                icon: ''
            },
            addurl: 'api/base/v1/subject/create',
            editurl: 'api/base/v1/subject/update/' + this.condition,
            selUrl: 'api/base/v1/subject/info/' + this.condition,

            
            subjectUrl: 'api/base/v1/get/subject/list',
            subjectList: [],
            
            period:Array,
            grade:Array,
            selGrade:'api/base/v1/get/grade/list?period_id=',
            selPeriod:'api/base/v1/get/period/list',

            ruleValidate: {
                'subject_name.zh': [
                    {required: true,message: '请输入学科名称',trigger: 'blur'}
                ],
                subject_number: [
                    {required: true,message: '请输入学科序号',trigger: 'blur'}
                ],
                subject_order: [
                    {required: true, type: 'number', message: '请输入学科排序',trigger: 'blur'}
                ],
                subject_slug: [
                    {required: true,message: '请输入学科别名',trigger: 'blur'}
                ],
                period_id: [
                    {required: true, type: 'array', message: '请选择学段', trigger: 'change'}
                ],
                type: [
                    {required: true, type: 'string', message: '请选择学科类型', trigger: 'change'}
                ],
                children: [
                    {required: true, type: 'array', message: '请选择子级学科', trigger: 'change'}
                ],
                grade_id: [
                    {required: true, type: 'array', message: '请选择年级', trigger: 'change'}
                ]
            }
        }
    },
    methods: {
        
        /************************************************************
         * 
         * 表单验证
         * @param   {name}            要验证的表单
         * 
         ************************************************************/
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.butload = true
                    if (this.condition) {
                        this.editSubmit ()
                    } else {
                        this.addSubmit ()
                    }
                } else {
                    this.$Message.error('请检查填写内容');
                }
            })
        },
        
        /************************************************************
         * 
         * 执行添加数据
         * 
         ************************************************************/
        addSubmit () {
            let datas = JSON.parse(JSON.stringify(this.form))
            if(datas.type == 'single') {
                delete datas.children
            }
            datas.grade_id = JSON.stringify(datas.grade_id)
            this.$http.post(this.addurl, datas).then(val=>{
                this.butload = false
                this.$emit('requery',true)
            }).catch(err => {
                this.butload = false 
            })
        },
        
        /************************************************************
         * 
         * 执行修改数据
         * 
         ************************************************************/
        editSubmit () {
            let datas = JSON.parse(JSON.stringify(this.form))
            if(datas.type == 'single') {
                delete datas.children
            }
            datas.grade_id = JSON.stringify(datas.grade_id)
            this.$http.put(this.editurl, datas).then(val=>{
                this.butload = false
                this.$emit('requery',true)
            }).catch(err => {
                this.butload = false 
            })
        },
        subjectData(){
            this.$http.get(this.subjectUrl).then(val=>{
                this.subjectList = JSON.parse(JSON.stringify(val.data))
            },err=>console.log(err))
        },
        periodChange(val){
            let index = JSON.stringify(val)
            console.log('898989',index)
            this.gradeData(index)
        },
        periodData(){
            this.$http.get(this.selPeriod).then(val=>{
                this.period = JSON.parse(JSON.stringify(val.data))
            },err=>console.log(err))
        },
        gradeData(val){
            this.$http.get(this.selGrade+val).then(val=>{
                this.grade = JSON.parse(JSON.stringify(val.data))
            },err=>console.log(err))
        },
        subjectChange(index) {
            if (index == 'complex') {
                this.subState = true
            }else{
                this.subState = false
            }
        },
        
        /************************************************************
         * 
         * 单条查询
         * 
         ************************************************************/
        selData(){
            this.$http.get(this.selUrl).then(val=>{
                // this.form = val.data;
                this.form.subject_name.zh= val.data.subject_name.zh
                this.form.subject_name.en= val.data.subject_name.en
                this.form.subject_name.mn= val.data.subject_name.mn
                this.form.type= val.data.type
                val.data.periods.map(el=>{
                     this.form.period_id.push(el.id)
                    
                })
                this.form.period_id = JSON.parse(JSON.stringify(this.form.period_id))
                this.form.subject_slug= val.data.subject_slug
                this.form.subject_number= val.data.subject_number
                this.form.subject_order= val.data.subject_order
                val.data.grades.map(el=>{
                    this.form.grade_id.push(el.id)
                })
                this.form.grade_id = JSON.parse(JSON.stringify(this.form.grade_id))
                this.form.children= val.data.childrens
                this.form.icon= val.data.icon
                console.log(this.form)
            }).catch(err => {
                })
        }
    },
    created () {
        this.subjectData()
        this.periodData()
        if (this.condition) this.selData()
    },
};
</script>